import React, {ReactElement, useRef, useState} from "react";
import {createStyles} from "antd-style";
import {UserOutlined} from "@ant-design/icons";
import userApi from "@/api/UserApi";
import {useLocation, useNavigate} from "react-router-dom";
import basicUser from "@/config/BasicUser.ts";
import UserLoginModal from "@/components/UserLoginModal.tsx";
import {useUserInfoStore} from "@/store/BaseStore.ts";

const iconSize = 50

const useStyles = createStyles(({css, token}) => {
    // todo 重构一些这个菜单
    return {
        container: css`
            position: fixed;
            z-index: 100;
            top: 0;
            left: 0;
            height: 100vh;
            background-color: transparent;
            backdrop-filter: blur(10px) brightness(80%);
            width: ${iconSize}px;
            transition: all .2s ease-in-out;
            overflow: hidden;

            &:hover {
                width: 300px;

                p {
                    width: 100%;
                    opacity: 100%;
                }
            }

            p {
                width: 0;
                opacity: 0;
            }

            .menu-item {
                font-size: 20px;
                line-height: ${iconSize}px;
                white-space: nowrap;
                transition: all .2s ease-in-out;
                display: flex;

                &:hover {
                    background-color: rgba(0, 0, 0, .1);
                    line-height: ${iconSize + 20}px;
                    cursor: pointer;

                    img {
                        height: ${iconSize + 20}px;
                        width: ${iconSize + 20}px;
                    }
                }

                &:active {
                    background-color: rgba(0, 0, 0, .2);
                }

                img {
                    width: ${iconSize}px;
                    height: ${iconSize}px;
                    padding: 2px;
                    object-fit: cover;
                    object-position: center;
                    transition: all .2s ease-in-out;
                }

                h3 {
                    width: ${iconSize}px;
                    height: ${iconSize}px;
                    text-align: center;
                    place-content: center;
                }
            }

            .clicked {
                color: ${token.colorPrimary};
            }
        `
    }
})

interface MenuItem {
    id: number
    icon: ReactElement
    content: string
    ref:  React.MutableRefObject<HTMLLIElement>,
    action: () => void,
    admin: boolean
}

const ContextMenu: React.FC = () => {
    const styles = useStyles().styles;
    const userInfoDto = useUserInfoStore(state => state.userInfoDto)
    const navigate = useNavigate();
    const location = useLocation();
    const [openLoginModal, setOpenLoginModal] = useState(false)

    const navi = (link: string) => {
        if (location.pathname == link) {
            window.messageApi.info('您已经在当前页面了').then()
        } else {
            navigate(link)
        }
    }

    const menuItems: MenuItem[] = [
        {
            id: 0,
            icon: <img src={userApi.getAvatarLink()} alt="头像"/>,
            content: userInfoDto.nickName,
            ref: useRef(),
            action: () => {
                if (userInfoDto.id == basicUser.id) {
                    setOpenLoginModal(true)
                } else {
                    // todo 进入个人页面
                }
            },
            admin: false
        },
        {
            id: 2,
            icon: <UserOutlined/>,
            content: '我的项目',
            ref: useRef(),
            action: () => {

            },
            admin: false
        },
        {
            id: 3,
            icon: <UserOutlined/>,
            content: '管理面板',
            ref: useRef(),
            action: () => {
                navi("/context/admin")
            },
            admin: true
        },
        {
            id: 4,
            icon: <UserOutlined/>,
            content: '返回起始页',
            ref: useRef(),
            action: () => {
                navi("/")
            },
            admin: false
        },
    ]

    return (
        <>
            <ul className={styles.container}>
                {
                    menuItems.map((item) => {
                        if (userInfoDto.level != 'Admin' && item.admin) {
                            return null
                        }

                        return (
                            <li className="menu-item"
                                onClick={() => {
                                    const li = item.ref.current
                                    li.classList.add('clicked')
                                    window.setTimeout(() => {
                                        li.classList.remove('clicked')
                                    }, 200)
                                    item.action()
                                }}
                                key={item.id}
                                ref={item.ref}
                            >
                                <h3>{item.icon}</h3>
                                <p>{item.content}</p>
                            </li>
                        )
                    })
                }
            </ul>
            <UserLoginModal open={openLoginModal} setOpen={setOpenLoginModal}/>
        </>
    )
}

export default ContextMenu